<template>
    <div class="register">
        <van-nav-bar title="注册页面" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="reg-img">
            <img src="../../static/images/logo.webp" alt="" srcset="">
        </div>
        <div class="register-box">
            <van-form @submit="onSubmit">
                <van-cell-group inset>
                    <van-field v-model="nickName" name="用户名" label="用户名" placeholder="请填写用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]" />
                    <van-field v-model="useracc" name="账号" label="账号" placeholder="请填写账号"
                        :rules="[{ required: true, message: '请填写账号' }]" />
                    <van-field v-model="password" type="password" name="密码" label="密码" placeholder="请填写密码"
                        :rules="[{ required: true, message: '请填写密码' }]" />
                    <van-field v-model="note" type="text" name="短信验证" label="短信验证" placeholder="请填写验证码"
                        :rules="[{ required: true, message: '请填写短信验证码' }]" />
                </van-cell-group>
                <button class="send" @click="onSend">send</button>
                <div style="margin: 16px;">
                    <van-button round block type="primary" native-type="submit">
                        提交
                    </van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>


<style lang="scss">
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";

.van-cell {
    line-height: 33px;
}

.reg-img {
    width: 53%;
    height: 10rem;
    margin: 0 auto;

    img {
        width: 100%;
        height: 100%;
    }
}

.van-button--block {
    background-color: $backGroundColor;
    color: #fff;
}



.van-field__control {
    height: 2rem;
}

.my-item {
    padding: 0 1rem;
}

.register-box {
    position: relative;

    .send {
        position: absolute;
        bottom: 75px;
        right: 20px;
        font-size: 13px;
        padding: .2667rem .5333rem;
        background-color: #1989fa;
        color: #fff;
        border: 0;
        border-radius: 5px;
    }
}
</style>



<script lang="ts" setup>
import { showToast } from 'vant';
import { useRouter } from 'vue-router'
import { register2, sendCode } from '../../request';
import { defineComponent, reactive, ref, } from "vue";
//导入获取当前时间的包
const moment = require('moment')
const onClickLeft = () => history.back();
const useracc = ref('');
const password = ref('');
const nickName = ref('');
const note = ref('')
let router = useRouter();
const user_create_time = moment().format('YYYY-MM-DD HH:mm:ss');

// showToast('提示内容');
const onSubmit = (values: any) => {
    console.log('submit', values);
    // 记录表单信息
    let user_acc = useracc.value;
    let user_pwd = password.value;
    let user_nick_name = nickName.value;
    let email_code = note.value;

    // let message = note.value
    // 判断输入框是否有值
    if (user_acc.length == 0 || user_pwd.length == 0 || user_nick_name.length == 0 || email_code.length == 0) {
        // console.log("输入框不能为空");
        // showToast("输入框不能为空。");
        return;
    }
    //注册
    register2({ user_acc, user_pwd, user_nick_name, user_create_time, email_code }).then((content: any) => {
        console.log(content);
        let { code, msg } = content;
        if (code == 200) {
            // 缓存token用户临时身份
            // localStorage.setItem('auto_token', token);
            // 跳转登录
            let d = setTimeout(() => {
                router.push({
                    path: '/login'
                })
                clearTimeout(d);
            }, 1000)
        }
        // 提示
        showToast(msg);
    })
        .catch(error => {
            console.log(error)
            // showToast('账户不存在');
        })
};
const onSend = () => {
    // console.log(111);
    let code = '1909003628@qq.com';
    sendCode({ email: code }).then((content: any) => {
        // console.log(content);
        let { code, msg } = content;
        if (code == 200) {
            console.log(msg);
        }
        // 提示
        showToast(msg);
    })
        .catch(error => {
            console.log(error)
            // showToast('账户不存在');
        })
}
</script>